<template>
  <div style="padding: 20px">
    <h2>TablePanel 示例（带已选项功能）</h2>

    <!-- 顶部统计 -->
    <el-alert v-if="selectedRows.length" type="primary" show-icon class="alert-wrapper">
      <div style="display: flex; align-items: center">
        已选择
        <span style="color: #67c23a; font-weight: bold; margin: 0 4px">
          {{ selectedRows.length }}
        </span>
        项
        <el-button type="primary" link style="margin-left: 8px" @click="isShowSelected = !isShowSelected">
          {{ isShowSelected ? '返回全部' : '查看已选项' }}
        </el-button>
      </div>
    </el-alert>

    <!-- 表格 -->
    <TablePanel
      :fetcher="fetchUsers"
      row-key="id"
      page
      :page-sizes="[10, 20, 50]"
      select-type="select"
      show-index
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.value"
        :label="item.label"
        :sortable="item.sortable || false"
        :sort-by="item.sortBy"
        v-bind="item.props"
      ></el-table-column>ß

      <!-- 操作列：仅在“查看已选项”模式下显示删除 -->
      <el-table-column v-if="isShowSelected" label="操作" width="100">
        <template #default="{ row }">
          <el-button type="danger" link @click="removeSelected(row)">删除</el-button>
        </template>
      </el-table-column>
    </TablePanel>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import TablePanel from '@/components/TablePanel/TablePanel.vue'

  // 模拟后端数据 —— 用户管理表格
  function generateMockUsers(total = 100) {
    const orgList = ['广州总部', '深圳分部', '上海中心', '北京办事处']
    const genderList = ['男', '女']
    const statusList = ['正常', '禁用', '待审核']

    return Array.from({ length: total }).map((_, i) => ({
      account: `user_${i + 1}`,
      username: `用户${i + 1}`,
      org: orgList[i % orgList.length],
      phone: `138${String(10000000 + i).slice(1, 8)}`,
      email: `user${i + 1}@demo.com`,
      mss: `mss_${i + 1}`,
      gender: genderList[i % 2],
      createdAt: `2025-01-${String((i % 28) + 1).padStart(2, '0')} 10:00:00`,
      status: statusList[i % statusList.length]
    }))
  }

  // 使用示例
  const allUsers = generateMockUsers();
  console.log(allUsers)

  const tableColumn = [
    { value: 'account', label: '账号' },
    { value: 'username', label: '用户名' },
    { value: 'org', label: '所属机构' },
    { value: 'phone', label: '手机号' },
    { value: 'email', label: '邮箱' },
    { value: 'mss', label: 'MSS账号' },
    { value: 'gender', label: '性别' },
    { value: 'createdAt', label: '创建时间' },
    { value: 'status', label: '状态' }
  ]

  // fetcher 模拟分页接口
  async function fetchUsers({ page, pageSize }) {
    // 如果是“只看已选项”模式，直接返回 selectedRows
    if (isShowSelected.value) {
      const list = selectedRows.value
      return { list, total: list.length }
    }

    const start = (page - 1) * pageSize
    const end = start + pageSize
    const list = allUsers.slice(start, end)

    await new Promise((r) => setTimeout(r, 300)) // 模拟延迟
    return { list, total: allUsers.length }
  }

  // 已选项管理
  const selectedRows = ref([])
  const isShowSelected = ref(false)

  function handleSelectionChange(rows) {
    selectedRows.value = rows
  }

  function removeSelected(row) {
    selectedRows.value = selectedRows.value.filter((item) => item.id !== row.id)
  }
</script>

<style scoped lang="scss">
  .table-panel {
    width: 100%;
  }

  /* 表头加粗 + 深色字体 */
  ::v-deep .el-table__header .cell {
    font-weight: 600 !important;
    color: #303133 !important;
  }

  .table-panel :deep(.el-table) {
    --el-table-header-bg-color: #f5f5f5; /* 表头背景色 */
    --el-table-header-text-color: #fff; /* 表头文字颜色 */
  }

  /* 明显的底部分割线 */
  ::v-deep .el-table__header-wrapper {
    border-bottom: 2px solid #ebeef5 !important;
  }
</style>
